<template>
	<view class="content">
		<view  class="index-box">
			<view class="button"   @click="toUrl('/pages/componentsA/animation/animation')">
				<text :class="'bg-'+themeColor.name">animation动画</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/mescroll/mescrollBody')">
				<text :class="'bg-'+themeColor.name">下拉刷新+上拉加载</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/webview/webview?url=' + 'http://www.50s.cc/')">
				<text :class="'bg-'+themeColor.name">访问H5页面</text>
			</view>
			<view class="button"   @click="toModal">
				<text :class="'bg-'+themeColor.name">全屏弹窗</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/modal/Popup')">
				<text :class="'bg-'+themeColor.name">普通弹窗</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/tip/tip')">
				<text :class="'bg-'+themeColor.name">Toast提示</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/weeklyTasks/weeklyTasks')">
				<text :class="'bg-'+themeColor.name">多列表滚动</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/modal/loading')">
				<text :class="'bg-'+themeColor.name">预加载Loading</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/navbar/navbar')">
				<text :class="'bg-'+themeColor.name">自定义可透明导航</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/webSocket/webSocket')">
				<text :class="'bg-'+themeColor.name">WebSocket</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/canvas/canvas')">
				<text :class="'bg-'+themeColor.name">海报二维码绘制</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/canvas/canvasFullScreen')">
				<text :class="'bg-'+themeColor.name">全屏海报二维码绘制</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/image/image')">
				<text :class="'bg-'+themeColor.name">图片懒加载</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/graceAddressPicker/graceAddressPicker')">
				<text :class="'bg-'+themeColor.name">选择地址</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/upgrade/upgrade')">
				<text :class="'bg-'+themeColor.name">App升级更新</text>
			</view>
			<view class="button"    @click="toUrl('/pages/componentsA/share/share')">
				<text :class="'bg-'+themeColor.name">第三方分享</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/payment/payment')">
				<text :class="'bg-'+themeColor.name">第三方支付</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/login/login')">
				<text :class="'bg-'+themeColor.name">第三方登录</text>
			</view>
			<view class="button"   @click="toUrl('/pages/componentsA/headPortrait/headPortrait')">
				<text :class="'bg-'+themeColor.name">图片裁剪（头像）</text>
			</view>
			<!-- #ifdef APP-PLUS || MP-WEIXIN-- -->
			<view class="button"    @click="toUrl('/pages/componentsA/saveimg/saveimg')">
				<text :class="'bg-'+themeColor.name">将图片转换为base64格式并上传</text>
			</view>
			<!-- #endif -->
			
			<view class="button"   @click="toUrl('/pages/componentsA/BackTop/BackTop')">
				<text :class="'bg-'+themeColor.name">返回顶部</text>
			</view>
			<view class="button"    @click="toUrl('/pages/componentsA/tabbar/tabbar')">
				<text :class="'bg-'+themeColor.name">tabbar</text>
			</view>
			<view class="button"    @click="toUrl('/pages/componentsA/u-charts/index')">
				<text :class="'bg-'+themeColor.name">图表</text>
			</view>
			
			
		</view>
		<!-- <tabbar :list="vuex_tabbar" active-color="#976bf8" inactive-color="#C0C4CC"></tabbar> -->
		<tip></tip>
	</view>
</template>

<script>
	import { mapState, mapMutations} from 'vuex'
	export default {
		onLoad() {
			if(this.closeStatippage){
				// #ifdef APP-PLUS
				this.toStartupPage() // 启动图
				// #endif
				// #ifdef H5
				// 直接到APP 关闭引导页
				this.toCloseStatippage(false)
				// #endif
			}else{
				// 加载首页的数据
			}
		},
		
		computed:{
			...mapState(['hasLogin','userInfo','vuex_tabbar','closeStatippage'])
		},
		methods: {
			...mapMutations(['toCloseStatippage']),
			toUrl(url){//跳转链接
				// #ifdef H5
					if(url == "/pages/componentsA/upgrade/upgrade"){
						this.$tip("请在App的环境下尝试",2,'red')
						return
					}
				// #endif
				uni.navigateTo({
					url:url
				})
			},
			toModal(){
				this.$showModal({content: `欢迎使用HTTP`}).then((data) => {
					console.log(data)
				}).catch((reject) => {
					// 取消
					console.log(reject)
				});
			},
			// 启动页
			toStartupPage(){
				uni.navigateTo({
					url: '/pages/componentsB/startupPage/startupPage',
					animationDuration:100   // 降低延迟
				});
			}
			
			
		},
		
	}
</script>

<style lang="scss">
	page{
		font-size: 30rpx;
	}
	.content{
		font-size: 30rpx;
	}
	.index-box{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}
	.button{
		width: 50%;
		padding: 20rpx;
		box-sizing: border-box;
		color: $font-color;
	}
	
	.button text{
	
		border-radius: 20rpx;
		height: 70rpx;
		line-height:  70rpx;
		width: 100%;
		display: block;
		text-align: center;
		
	}
	.button:nth-child(even) text{
		background-color: #4CD964;
	}
	.active{
		background: #999999;
	}
</style>
